<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title>注册</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<meta name="format-detection" content="telephone=no">
		<meta name="renderer" content="webkit">
		<meta http-equiv="Cache-Control" content="no-siteapp" />

		<link rel="stylesheet" href="static/css/amazeui.css" />
		<link href="static/css/dlstyle.css" rel="stylesheet" type="text/css">
		
		<link rel="stylesheet" href="static/css/bootstrap.min.css" />
	</head>

	<body>

		<div class="login-boxtitle" style="height: 100px;">
			<div class="logoBig">
				<img src="static/images/logo.png" style="margin-left: 0px ; height: 100px;">
			</div>
		</div>

		<div class="login-banner" style="back+
		ground: rgb(142,213,21);" id="app">
			<div class="login-main">
				<div class="login-banner-bg"><span></span><img width="400"  src="static/images/act2.png" /></div>
				<div class="login-box">

					<h3 class="title">用户注册</h3>

					<h5 :style="colorStyle" id="tips" >{{tips}}&nbsp;</h5>

					<div class="clear"></div>

					<div class="login-form" style="background: none;">
						<form>
							<div class="user-name">
								<label for="user"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></label>
								<input type="text" v-model="user.username" name="" id="user" @keyup="checkInfo" placeholder="邮箱/手机/用户名">
							</div>
							<!-- <div class="user-pass" style="margin-top: 15px;">
								<label for="password"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span></label>
								<input type="email" name="" v-model="user.email" @keyup="email" id="email" @keyup="email" placeholder="请输入邮箱">
							</div> -->

							<div class="user-pass" style="margin-top: 15px;">
								<label for="password"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span></label>
								<input type="password" name="" v-model="user.password" @keyup="checkInfo" id="password" @keyup="checkInfo" placeholder="请输入密码">
							</div>
							<div class="user-pass" style="margin-top: 15px;">
								<label for="password"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span></label>
								<input type="password" name="" v-model="user.confirmpassword" id="repassword" @keyup="checkInfo" placeholder="请再次输入密码">
							</div>
						</form>
					</div>

					<div class="login-links">
						<br />
					</div>
					<div class="am-cf">
						<input type="submit" @click="doSubmit" name="" value="提交注册" class="am-btn am-btn-primary am-btn-sm">
					</div>
					<div class="partner">
						
					</div>

				</div>
			</div>
		</div>

		<div class="footer ">
			<div class="footer-hd ">

			</div>
			<div class="footer-bd ">
				<p>
					<a href="# ">联系我们</a>
					<a href="# ">网站地图</a>
				</p>
			</div>
		</div>
	</body>

<script src="static/js/vue.min.js"></script>
<script src="static/js/moment-with-locales.js"></script>
<script src="static/js/axios.min.js"></script>
<script src="static/js/base.js"></script>


<script>


 var vm=new Vue({
	el:'#app',
	data:{
		user:{
			username:"",
			password:"",
			confirmpassword:""
		},
		tips:"",
		colorStyle:"",


	},
	methods:{
		doSubmit:function(){
			// 校验成功

			if(vm.isRight){
				var url=baseUrl+"user/regist";
				// axios.post(url,vm.user).then((res)=>{

				// console.log(res);

				// 	var vo=res.data;
				// 	if(vo.code==1){
				// 		window.location.href="login.html";
				// 	}else{
				// 		vm.tips="注册不符合规范";
				// 	}



				// });



				axios({
					method:"post",
					url:url,
					data:vm.user
				}).then((res)=>{
                  console.log(res);
				  console.log(res.code);

				  var vo=res.data;

					if(vo.code==1){
	window.location.href="login.html";
						// 设置一个时间的函数，可以显示注册成功的消息，燥，you are a good and brave boy
                    // vm.tips="you are make it successful,ok you are goodjob";
					// 	setTimeout(function(){

						

					// },3000)
}
				else{
						
				    vm.tips="注册的格式错误！！！";
				     vm.colorStyle="color:red"


 }
             

				});

			}else{
				vm.tips="请输入正确的用户名和密码";
				vm.colorStyle="color:red"
			}

            //  1.进行数据的校验

            if(vm.username==" "){
                vm.tips="请输入用户名";
                vm.colorStyle="color:red";


            }
             
         },
         checkInfo:function(){
            if(user.username==""){
                vm.tips="请输入用户名";
                this.colorStyle="color:red";
				vm.isRight=false;


            }else if(vm.user.username.length<6 || vm.user.username.length>20){
                vm.tips="账号长度必须为6-20";
                vm.colorStyle="color:red";
				vm.isRight=false;





            }else{
// 校验密码
				if(vm.user.password==""){
                vm.tips="请输入密码";
                this.colorStyle="color:red";
				vm.isRight=false;


            }else if(vm.user.password.length<6 ||vm.user.password.length>16){
				vm.tips="密码长度为6-16";
                this.colorStyle="color:red";
				vm.isRight=false;

			}else if(vm.user.confirmpassword==""){
				vm.tips="请输入确认密码:";
                this.colorStyle="color:red";
				vm.isRight=false;


			}
			else if(vm.user.confirmpassword!=vm.user.password){
				vm.tips="两次输入的不一致";
                this.colorStyle="color:red";
				vm.isRight=false;
}
			
			else{
				vm.tips=" ";
				vm.isRight=true;
			}

}
}

}




 })


</script>


</html>